<template>
    <view class="container">
        <view class="recommendation">
            <view class="recommendation-header">
                <view class="header_item">我的贡献值：<text>{{ personal.contributions }}</text></view>
                <view class="header_item">排行：<text>{{ personal.rank }}</text></view>
            </view>
            <view class="tabs">
                <view class="tabs_words">
                    <view class="top"><image src="../../../static/images/contribution/upload.svg"></image>知识上传</view>
                    <view class="bottom">{{ personal.uploads }}</view>
                </view>
                <view class="tabs_words">
                    <view class="top"><image src="../../../static/images/contribution/sum_look.svg"></image>总浏览量</view>
                    <view class="bottom">{{ personal.views }}</view>
                </view>
                <view class="tabs_words">
                    <view class="top"><image src="../../../static/images/contribution/good.svg"></image>获点赞数</view>
                    <view class="bottom">{{ personal.likes }}</view>
                </view>
                <view class="tabs_words">
                    <view class="top"><image src="../../../static/images/contribution/collect.svg"></image>获收藏数</view>
                    <view class="bottom">{{ personal.collects }}</view>
                </view>
            </view>
        </view>

        <view class="knowledge">
            <view class="knowledge_header">
                <image src="../../../static/images/contribution/sort.svg"></image>贡献值排行
            </view>
    
            <view class="rank_lists">
                <view class="rank_list" v-for="(item, index) in rankList" :key="'rank' + index">
                    <image src="../../../static/images/contribution/personal_logo.svg"></image>
                    <view class="rank_list-center">
                        <view class="name">{{item.uploadUser}}</view>
                        <view class="card">知识上传：<text>{{item.uploads}}</text></view>
                        <view class="card">总浏览量：<text>{{item.views}}</text></view>
                    </view>
                    <view class="rank_list-right">
                        <view class="evaluate">贡献值评价：
                            <text :style="index === 0 ?
                            'color: #F53F3F;' : index === 1 ?
                             'color: #FAAD14;' : index === 2 ? 'color: #00B42A;' : 'color: #1C2126;'">
                                {{item.contributions}}
                            </text>
                        </view>
                        <view class="card">获点赞：<text>{{item.likes}}</text></view>
                        <view class="card">获收藏：<text>{{item.collects}}</text></view>
                    </view>
                </view>
            </view>
        </view>
    
        <view v-if="loadmore" class="loadMore">—已加载全部—</view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            tabsList: [
                { title: "知识上传", num: 1112, label: "条" },
                { title: "总浏览量", num: 22222, label: "次" },
                { title: "获点赞数", num: 3333, label: "次" },
                { title: "获收藏数", num: 4444, label: "次" },
            ],
            rankList: [],
            personal: {},
            loadmore: false,
            pageNumber: 1,
            pageSize: 10,
            totalPage: 0,
            totalSize: 0,
        };
    },
    onPullDownRefresh() {
        // this.pageNumber = 1
        // this.pageSize = 10
        // this.totalPage = 0
        // this.totalSize = 0
        this.getRankList()
        this.getPersonal()
        setTimeout(() => {
            // this.loadmore = fals e
            uni.stopPullDownRefresh();
        },1000)
    },
   /* onReachBottom() {
        if(this.pageNumber >= this.totalPage) {
            this.loadmore = true
            return
        }
        this.pageNumber = this.pageNumber + 1
        if(this.pageNumber > this.totalPage){
        } else {
            this.getRankList()
        }
    },*/
    mounted() {
        this.getRankList()
        this.getPersonal()
    },
    methods: {
    
        getRankList() {
            this.$request({
                url: '/contribution/rank',
                method: 'get',
                params: {}
            }).then(({ data }) => {
                this.rankList = data
            })
        },
        getPersonal() {
            this.$request({
                url: '/contribution/personal',
                method: 'get',
                params: {}
            }).then(({ data }) => {
                this.personal = data
            })
        },
        getRuleList() {
            this.$request({
                url: '/contribution/ruleList',
                method: 'get',
                params: {}
            }).then(({ data }) => {
                this.rankList = data
            })
        },
    },
};
</script>

<style lang="scss" scoped>
.container {
    padding: 40rpx 30rpx;
}

.knowledge {
    width: 100%;
    border-bottom: none !important;
    .knowledge_header {
        font-family: Source Han Sans;
        font-size: 32rpx;
        font-weight: 500;
        display: flex;
        margin: 40rpx auto 20rpx;
        image{
            width: 44rpx;
            height: 44rpx;
            margin-right: 20rpx;
        }
    }
}

.recommendation {
    width: 100%;
    margin: 0 auto;
    // border: 1px solid #8f8f94;
    background: #fff;
    border-radius: 16rpx;
    padding: 20rpx;

    .recommendation-header {
        width: 100%;
        padding: 20rpx 0;
        background: #fff;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 22rpx;
        .header_item {
            font-family: Source Han Sans;
            font-size: 32rpx;
            font-weight: 500;
            text {
                color: #f53f3f;
            }
            &:last-child {
                text {
                    color: #1C2126;
                }
            }
        }
    }

    .tabs {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 22rpx;
            .tabs_words {
                height: 140rpx;
                border-radius: 16rpx;
                font-family: Source Han Sans;
                font-weight: 500;
                font-size: 28rpx;
                color: #fff;
                padding: 30rpx 20rpx 20rpx;
                &:nth-child(1) {
                    background: #0f8bff;
                }
                &:nth-child(2) {
                    background: #5bdc71;
                }
                &:nth-child(3) {
                    background: #f64a4a;
                }
                &:nth-child(4) {
                    background: #faad14;
                }
                .top {
                    image{
                        width: 28rpx;
                        height: 28rpx;
                        margin-right: 26rpx;
                    }
                }
            }
    }
}


.rank_lists{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    item-align: flex-start;
    border-radius: 16rpx;
    background: #FFFFFF;
    .rank_list{
        padding: 36rpx;
        display: grid;
        grid-template-columns: 104rpx 1fr 1fr;
        grid-column-gap: 40rpx;
        font-family: Source Han Sans;
        font-weight: 500;
        position: relative;
        & + .rank_list:before{
            content: '';
            position: absolute;
            top: 0;
            left: 20rpx;
            right: 20rpx;
            height: 1rpx;
            background: #E4E4E4;
        }
        image{
            width: 104rpx;
            height: 104rpx;
            border-radius: 50%;
            align-self: center;
        }
        .rank_list-center{
            .name{
                font-size: 30rpx;
                height: 30rpx;
                line-height: 30rpx;
                margin-bottom: 32rpx;
                color: #1C2126;
            }
            .card{
                font-size: 24rpx;
                color: #4C5A67;
                line-height: 48rpx;
                height: 48rpx;
                text{
                    color: #0084FF;
                }
            }
        }
        .rank_list-right{
            .evaluate{
                font-family: 思源黑体;
                font-size: 24rpx;
                height: 30rpx;
                line-height: 30rpx;
                font-weight: normal;
                margin-bottom: 32rpx;
                color: #4C5A67;
                text{
                    font-weight: 500;
                }
            }
            .card{
                font-size: 24rpx;
                color: #4C5A67;
                line-height: 48rpx;
                height: 48rpx;
                text{
                    color: #0084FF;
                }
            }
        }
    }
}
.loadMore{
    color: #b5b5b5;
    line-height: 2;
    font-size: 12px;
    text-align: center;
}
</style>